<!--
 * @Author: your name
 * @Date: 2021-07-22 16:17:15
 * @LastEditTime: 2021-09-15 14:17:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /sports-wechat/activity/matchInfo/components/matchList.vue
-->
<template>
  <view class="match-list">
    <!-- 活动未进行到这一步 -->
    <template v-if="currentChoose > active && currentChoose !== 0">
      <view class="match-item" v-for="(item, index) in matchList" :key="index">
        <view class="name">
          <text>第{{item[0].eventGames}}场</text>
          <text>{{item[0].title}}</text>
        </view>
        <view class="content">
          <view :class="['part', 'part-one']">
            <view class="part-name">?</view>
            <view class="part-score">0</view>
          </view>
          <view :class="['part', 'part-two']">
            <view class="part-name">?</view>
            <view class="part-score">0</view>
          </view>
        </view>
        <!-- 成员列表 -->
        <view class="player-wrap">
          <view class="player-list">
            <view class="head-icon">
              <image :src="'@/static/images/match/default_left.png'|addBaseImgUrl" mode="" />
            </view>
          </view>
          <view class="player-list list-right">
            <view class="head-icon">
              <image :src="'@/static/images/match/default_right.png'|addBaseImgUrl" mode="" />
            </view>
          </view>
        </view>
      </view>
    </template>
    <!-- 已结束，进行中 -->
    <template v-if="currentChoose <= active || currentChoose == 0">
    <view class="match-item" v-for="(item, index) in matchList" :key="index">
      <view class="name">
        <text>第{{item[0].eventGames}}场</text>
        <text>{{item[0].title}}</text>
      </view>
      <view class="content">
        <!-- 对于决赛之前已结束的赛程场次，需要用result来区分输赢1赢0输。    决赛需要用的teamResult字段，1冠军2亚军3季军 -->
        <view :class="['part', 'part-one', item[0].virtualTeam == 1 ? 'gray' : '']">
          <view class="part-name">{{item[0].virtualTeam == 1 ? '无' : item[0].teamCode}}</view>
          <view class="part-score">{{item[0].virtualTeam == 1 ? 0 : item[0].score}}</view>
          <!-- 决赛之前 -->
          <!-- {{currentChoose + '...' + active + '...' + list.length}}
          {{'当前点击是不是决赛'}}{{currentChoose == active-1}}
          {{'当前活动是不是已经结束'}} {{active >= list.length}} -->
          <!-- 比赛完成 -->
          <template v-if="active >= list.length">
            <!-- 选中决赛（单循环除外） -->
            <view v-if="currentChoose == active -1 && currentScheduleType != 20" :class="['win-bg-left',item[0].teamResult == 1 ? 'one' : item[0].teamResult == 2 ? 'two' : item[0].teamResult == 3 ? 'three' : '']"></view>
            <!-- 选中决赛之前循环赛 -->
            <view v-if="(currentChoose < active -1 && currentScheduleType == 20) || (sportEventId == 20 && currentScheduleType == 20)" :class="['win-bg-left',item[0].result == 1 ? 'win' : '']"></view>
            <!-- 选中决赛之前淘汰赛 -->
            <view v-if="currentChoose < active -1 && currentScheduleType == 30" :class="['win-bg-left',item[0].result == 1 ? 't-win' : '']"></view>
          </template>
          <!-- 比赛完成 -->
          <!-- 比赛未完成 -->
          <template v-if="active < list.length">
            <!-- 未完成选中循环赛 -->
            <view v-if="(currentChoose < active && currentScheduleType == 20) || (sportEventId == 20 && currentChoose < active )" :class="['win-bg-left',item[0].result == 1 ? 'win' : '']"></view>
            <!-- 未完成选中淘汰赛 -->
            <view v-if="currentChoose < active && currentScheduleType == 30" :class="['win-bg-left',item[0].result == 1 ? 't-win' : '']"></view>
          </template>
          <!-- 比赛未完成 -->
        </view>
        <view :class="['part', 'part-two', item[1].virtualTeam == 1 ? 'gray' : '']">
          <view class="part-name">{{item[1].virtualTeam == 1 ? '无' :item[1].teamCode}}</view>
          <view class="part-score">{{item[1].virtualTeam == 1 ? 0 : item[1].score}}</view>
          <!-- 比赛完成 -->
          <template v-if="active >= list.length">
            <!-- 选中决赛（单循环除外） -->
            <view v-if="currentChoose == active-1 && currentScheduleType != 20" :class="['win-bg-right',item[1].teamResult == 1 ? 'one' : item[1].teamResult == 2 ? 'two' : item[1].teamResult == 3 ? 'three' : '']"></view>
            <!-- 选中决赛之前循环赛-->
            <view v-if="(currentChoose < active -1 && currentScheduleType == 20) || (sportEventId == 20 && currentScheduleType == 20)" :class="['win-bg-right',item[1].result == 1 ? 'win' : '']"></view>
            <!-- 选中决赛之前淘汰赛-->
            <view v-if="currentChoose < active -1 && currentScheduleType == 30" :class="['win-bg-right',item[1].result == 1 ? 't-win' : '']"></view>
          </template>
          <!-- 比赛完成 -->
          <!-- 比赛未完成 -->
          <template v-if="active < list.length">
            <!-- 选中决赛之前循环赛-->
            <view v-if="(currentChoose < active && currentScheduleType == 20 )|| (sportEventId == 20 && currentChoose < active )" :class="['win-bg-right',item[1].result == 1 ? 'win' : '']"></view>
            <!-- 选中决赛之前淘汰赛-->
            <view v-if="currentChoose < active && currentScheduleType == 30" :class="['win-bg-right',item[1].result == 1 ? 't-win' : '']"></view>
          </template>
          <!-- 比赛未完成 -->
        </view>
      </view>
          <!-- 成员列表 -->
    <view class="player-wrap">
      <view class="player-list list-left">
        <template v-if="item[0].virtualTeam != 1">
          <view :class="['list-item', 
          !matchShowChoose.includes(item[0].eventGames) && index > 2 ? 'hidden' : '',
          player.userId == userData.id ? 'check-player': '']" 
          v-for="(player, index) in item[0].actEventTeamEnterList" :key="player.id">
            <view class="head">
              <!-- <image :src="player.playerIcon" mode="" /> -->
              <image v-if="player.playerIcon" :src="(player.playerIcon.indexOf('player-icon-boy') > -1 || player.playerIcon.indexOf('player-icon-gril') > -1) ? player.userIcon : player.playerIcon" mode=""></image>
              <template v-else>
                <image :src="player.userIcon" mode=""></image>
              </template>
              <view :class="['icon', player.sex == 2 ? 'girl' : 'boy']"></view>
            </view>
            <text class="line-clamp-1">{{player.relName}}</text>
          </view>
        </template>
        <template v-else>
          <view class="empty">空</view>
        </template>
      </view>
      <view class="player-list list-right">
        <template v-if="item[1].virtualTeam != 1">
          <view :class="['list-item',
           !matchShowChoose.includes(item[1].eventGames) && index > 2 ? 'hidden' : '',
           player.userId == userData.id ? 'check-player': ''
           ]"
           v-for="(player, index) in item[1].actEventTeamEnterList" :key="player.id">
            <text class="line-clamp-1">{{player.relName}}</text>
            <view class="head">
              <image v-if="player.playerIcon" :src="(player.playerIcon.indexOf('player-icon-boy') > -1 || player.playerIcon.indexOf('player-icon-gril') > -1) ? player.userIcon : player.playerIcon" mode=""></image>
              <template v-else>
                <image :src="player.userIcon" mode=""></image>
              </template>
              <view :class="['icon', player.sex == 2 ? 'girl' : 'boy']"></view>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="empty">空</view>
        </template>
      </view>
    </view>
        <!-- 收起展开 -->
    <view v-if="(item[0].actEventTeamEnterList.length && item[0].actEventTeamEnterList.length > 2) || (item[1].actEventTeamEnterList.length && item[1].actEventTeamEnterList.length > 2)" class="action-wrap" @click="$emit('showToogle', 'match', item[0].eventGames)">
      <view class="icon-info">
        <view :class="['icon', matchShowChoose.includes(item[0].eventGames) ? 'up' : 'down']"></view>
      </view>
      <text>{{matchShowChoose.includes(item[0].eventGames) ? '收起' : '展开'}}</text>
    </view>
    </view>
    </template>
  </view>
</template>

<script>
  export default {
    props: ['matchList', 'matchShowChoose', 'active', 'currentChoose', 'list', 'currentScheduleType', 'sportEventId', 'userData']
  }
</script>

<style lang="scss" scoped>
.match-list {
  padding: 0 20rpx;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  .match-item {
    margin-top: 20rpx;
    width: 100%;
    border-radius: 15rpx;
    background: #fff;
    overflow: hidden;
    padding-bottom: 20rpx;
    &:last-of-type {
      margin-bottom: 20rpx;
    }
    .name {
      margin-top: 30rpx;
      display: flex;
      width: 100%;
      justify-content: space-between;
      position: relative;
      padding: 0 30rpx;
      box-sizing: border-box;
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        margin-right: 15rpx;
        display: block;
        content: '';
        width: 15rpx;
        height: 50rpx;
        background: #FDB42E;
      }
      text {
        height: 50rpx;
        line-height: 50rpx;
        font-size: 30rpx;
        color: #999;
        &:first-of-type {
          color: #333;
        }
      }
    }
    .content {
      display: flex;
      position: relative;
      .part {
        flex: 1;
        .part-name,.part-score {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 72rpx;
          line-height: 72rpx;
          z-index: 2;
          position: relative;
        }
        .part-name {
          margin-top: 20rpx;
          color: #2E87FF;
        }
        .part-score {
          margin-top: 30rpx;
          height: 96rpx;
          color: #fff;
          background:#A0C8FF;
        }
        .win {
          width: 124rpx;
          height: 105rpx;
        }
        .win-bg-left {
          width: 124rpx;
          height: 105rpx;
          position: absolute;
          top: 17rpx;
          left: 0;
          &.win {
            background: url($public-baseImgUrl+'match/ranking_win_left.png');
            background-size: 100% 100%;
          }
          &.one {
            background: url($public-baseImgUrl+'match/ranking_win_one_left.png');
            background-size: 100% 100%;
          }
          &.two {
            background: url($public-baseImgUrl+'match/ranking_win_two_left.png');
            background-size: 100% 100%;
          }
          &.three {
            background: url($public-baseImgUrl+'match/ranking_win_three_left.png');
            background-size: 100% 100%;
          }
          &.t-win {
            background: url($public-baseImgUrl+'match/ranking_t_win_left.png');
            background-size: 100% 100%;
          }
        }
      }
      .part-two {
        .part-name {
          color: #FDB42E;
        }
        .part-score {
          background: #FFD382;
        }
        .win-bg-right {
          width: 124rpx;
          height: 105rpx;
          position: absolute;
          top: 17rpx;
          right: 0!important;
          &.win {
            background: url($public-baseImgUrl+'match/ranking_win_right.png');
            background-size: 100% 100%;
          }
          &.one {
            background: url($public-baseImgUrl+'match/ranking_win_one_right.png');
            background-size: 100% 100%;
          }
          &.two {
            background: url($public-baseImgUrl+'match/ranking_win_two_right.png');
            background-size: 100% 100%;
          }
          &.three {
            background: url($public-baseImgUrl+'match/ranking_win_three_right.png');
            background-size: 100% 100%;
          }
          &.t-win {
            background: url($public-baseImgUrl+'match/ranking_t_win_right.png');
            background-size: 100% 100%;
          }
        }
      }
      .gray {
        .part-name {
          color: #ccc !important;
        }
        .part-score {
          background: #ccc !important;
        }
      }
      .record {
        width: 216rpx;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -108rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .bg {
          width: 216rpx;
          height: 141rpx;
          background: url($public-baseImgUrl+'match/versus.png');
          background-size: 100% 100%;
          position: relative;
          z-index: 1;
        }
        .btn {
          width: 125rpx;
          height: 125rpx;
          border-radius: 50%;
          background: #2E87FF;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 30rpx;
          position: relative;
          z-index: 3;
          margin-top: -28rpx;
        }
      }
    }
    .action-wrap {
      width: 100%;
      height: 108rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .icon-info {
        width: 60rpx;
        height: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #E8E8E8;
        border-radius: 15rpx;
        .icon {
          width: 30rpx;
          height: 17rpx;
          &.up {
            background:url();
            background-size: 100% 100%;
          }
          &.down {
            background:url();
            background-size: 100% 100%;
          }
        }
      }
      text {
        font-size: 24rpx;
        line-height: 24rpx;
        color: #999;
        margin-top: 20rpx;
      }
    }
    .player-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
    .player-list {
      min-height: 260rpx;
      flex: 1;
      margin-top: 10rpx;
      padding-left: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .list-item {
        margin-top: 30rpx;
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
        &.hidden {
          display: none;
        }
        .head {
          margin-right: 20rpx;
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          position: relative;
          z-index: 2;
          image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            background: #f2f2f2 url($public-baseImgUrl+'icon_renshu.png') center no-repeat;
            background-size: 100% 100%;
          }
          .icon {
            position: absolute;
            top: 0;
            right: 0;
            width: 30rpx;
            height: 30rpx;
            &.girl {
              background: url($public-baseImgUrl+'icon_w.png') no-repeat;
              background-size: 100% 100%;
            }
            &.boy {
              background: url($public-baseImgUrl+'icon_m.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        >text {
          max-width: 200rpx;
        }
      }
      .head-icon {
        image {
          width: 125rpx;
          height: 125rpx;
          border-radius: 100%;
        }
      }
      .empty {
        width: 125rpx;
        height: 125rpx;
        background: #f2f2f2;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ccc;
      }
      &.list-left {
      .check-player {
        // border: 5rpx solid #2E87FF;
        position: relative;
        &::after {
          width: 84rpx;
          height: 84rpx;
          background: #fff;
          position: absolute;
          top: -6rpx;
          left: -6rpx;
          content: '';
          z-index: 1;
          border-radius: 50%;
          border: 5rpx solid #A0C8FF;
        }
      }
    }
      &.list-right {
      padding-left: 0;
      padding-right: 30rpx;
      .list-item {
        justify-content: flex-end;
        .head {
          margin-left: 20rpx;
          margin-right: 0;
        }
      }
      .check-player {
        // border: 5rpx solid #2E87FF;
        position: relative;
        &::after {
          width: 84rpx;
          height: 84rpx;
          background: #fff;
          position: absolute;
          top: -6rpx;
          right: -6rpx;
          content: '';
          z-index: 1;
          border-radius: 50%;
          border: 5rpx solid #A0C8FF;
        }
      }
    }
    }
    .part-two {
      .player-list {
        padding-left: 0;
        padding-right: 30rpx;
        .list-item {
          justify-content: flex-end;
          .head {
            margin-right: 20rpx;
            margin-left: 20rpx;
          }
        }
      }
    }
  }
  }
}
</style>